<template>
  <div class="container">
    <div class="header">
      <div class="title">天空秒</div>
      <img class="pic" src="@/assets/images/xm/bg_login.png" alt="">
      <div class="back" @click="back">返回</div>
      <div class="bg-color"></div>
    </div>
    <div class="main">
      <div class="main-input">
        <div class="sl">
          <div class="left">卡密:</div>
          <input placeholder="请输入卡密" type="text" class="right" v-model="account">
        </div>
        <div class="search-on" @click="search">查詢</div>
      </div>
      <ul class="ul" v-if="cardData.show">
        <li class="li">卡密状态: {{ cardData.userStatus }}</li>
        <li class="li">套餐名称: {{ cardData.cardName }}</li>
        <li class="li">激活时间: {{ cardData.activeTime }}</li>
        <li class="li">到期时间: {{ cardData.endTime }}</li>
      </ul>
    </div>
  </div>

</template>

<script>
import {MessageBox, Indicator, Toast} from 'mint-ui'

export default {
  data () {
    return {
      starsCount: 1800, // 数量
      distance: 800, // 间距
      account: '',
      cardData: {
        show: false
      },
      getQrCodeUrl: 'http://123.129.217.73:9999/api'
      //getQrCodeUrl: 'http://127.0.0.1:9990/api'
    }
  },
  mounted () {

  },
  methods: {
    back () {
      this.$router.push('/loginIndex')
    },
    search () {
      if (this.account != '') {
        Indicator.open({
          text: '查询中...',
          spinnerType: 'fading-circle'
        })
        let params = {
          cdKey: this.account
        }
        this.$axios({
          url: this.getQrCodeUrl + '/cdkCheck',
          method: 'get',
          timeout: 20000,
          params: params
        }).then(res => {
          Indicator.close()
          if (res.data.code === 200 && res.data.data.code === 200) {
            this.cardData = res.data.data.data
            console.log(this.cardData)
            this.cardData.show = true
          } else {
            MessageBox.alert(`尊敬的用户，${res.data.data.msg}`).then(action => {
            })
          }
        })
      } else {
        Toast({
          message: '激活码不能为空',
          duration: 1500,
          position: 'middle'
        })
      }
    },
    toQrcode () {
      if (this.account != '') {
        Indicator.open({
          text: '激活中...',
          spinnerType: 'fading-circle'
        })
        this.$axios.post('api/queryKeyCode', {keyCode: this.account}).then(response => {
          if (response.status == 200) {
            Indicator.close()
            if (response.data != '') {
              Toast({
                message: '激活成功',
                duration: 1500,
                position: 'middle'
              })
              localStorage.setItem('userLoginOn', JSON.stringify(''))
              this.$router.push({path: '/qrCode', query: {keyCode: this.account}})
            } else {
              Toast({
                message: '卡密无效,请重新输入',
                duration: 1500,
                position: 'middle'
              })
            }
          }
        })
      } else {
        Toast({
          message: '激活码不能为空',
          duration: 1500,
          position: 'middle'
        })
      }
    },
    opacity () {
      this.$refs.opacity.style.opacity = '1'
    },
    opacityOff () {
      this.$refs.opacity.style.opacity = '0.5'
    }
  }
}
</script>

<style lang="scss" scoped>
.container {

  .bg-color {
    position: fixed;
    width: 750px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background: #A9BFDB;
    z-index: -1;
  }

  .stars {
    transform: perspective(500px);
    transform-style: preserve-3d;
    position: absolute;
    perspective-origin: 50% 100%;
    left: 50%;
    animation: rotate 90s infinite linear;
    bottom: 0;

    .star {
      width: 2px;
      height: 2px;
      background: #f7f7b8;
      position: absolute;
      top: 0;
      left: 0;
      backface-visibility: hidden;
    }

    @keyframes rotate {
      0% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
      }
      100% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
      }
    }
  }

  .login {
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    opacity: 1;
    top: 20px;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
    -webkit-transition-property: -webkit-transform, opacity, box-shadow, top, left;
    transition-property: transform, opacity, box-shadow, top, left;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transform-origin: 161px 100%;
    -ms-transform-origin: 161px 100%;
    transform-origin: 161px 100%;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    position: relative;
    width: 600px;
    /* border-top: 2px solid #D8312A; */
    height: 800px;
    padding: 200px 50px 0;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%);

    .logo {
      width: 40%;
      position: absolute;
      left: 50%;
      top: -15%;
      transform: translateX(-50%);
    }

    .title {
      font-size: 32px;
      color: #D3D7F7;
    }

    .psw {
      display: flex;
      align-items: center;
      margin-top: 100px;

      img {
        width: 30px;
        height: 30px;
        margin-right: 20px;
        opacity: .5;
      }

      input {
        border: 0;
        margin: 0;
        padding: 0;
        height: 40px;
        font-size: 26px;
        line-height: 40px;
        color: #61BFFF;
        background-color: rgba(53, 57, 74, 0);

        &::-webkit-input-placeholder {
          color: #D3D7F7;
        }

        &::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: #D3D7F7;
        }

        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: #D3D7F7;
        }

        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
          color: #D3D7F7;
        }
      }
    }

    .enter {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 100px;

      div {
        width: 200px;
        height: 60px;
        border-radius: 30px;
        border: 2px solid #4FA1D9;
        color: #4FA1D9;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          color: white;
          background: #4FA1D9;
          cursor: pointer;
          -webkit-transition-property: background, color;
          transition-property: background, color;
          -webkit-transition-duration: .2s;
          transition-duration: .2s;
        }
      }
    }
  }

  .card {
    margin-top: 48px;

    div {
      margin-top: 12px;
      font-size: 32px;
      color: #D3D7F7;
    }
  }

  .header {
    width: 750px;
    height: 570px;
    position: relative;

    .title, .back {
      position: absolute;
      top: 20px;
      height: 28px;
      font-size: 30px;
      letter-spacing: 3px;
      color: #000000;
      font-weight: 500;
    }

    .title {
      left: 40px;
    }

    .back {
      right: 40px;
    }

    .pic {
      width: 750px !important;
      width: 570px;
    }

    .logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 156px;
      height: 156px;
      top: 160px;
    }

    .name {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 360px;
      font-size: 38px;
      font-weight: 500;
      color: #ffffff;
      width: 750px;
      text-align: center;
    }
  }

  .main {
    position: relative;
    top: -120px;

    .main-input {
      width: 668px;
      height: 250px;
      background-color: #ffffff;
      box-shadow: 2px 10px 10px 0px rgba(89, 103, 255, 0.3);
      border-radius: 57px;
      margin-left: 41px;
      padding-top: 40px;

      .sl {
        display: flex;
        align-items: center;
        justify-content: center;

        .left {
          font-size: 35px;
          color: #000000;
          margin-right: 12px;
        }

        .right {
          width: 420px;
          height: 70px;
          background-color: #f4f6f8;
          letter-spacing: 6px;
          color: #333;
          font-size: 30px;
          margin: 0;
          padding: 0;
          border: 0;
          padding-left: 24px;

          &::-webkit-input-placeholder {
            color: #bfbfbf;
          }

          &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #bfbfbf;
          }

          &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #bfbfbf;
          }

          &:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #bfbfbf;
          }
        }
      }

      .search-on {
        width: 608px;
        height: 80px;
        margin-left: 30px;
        margin-right: 30px;
        background-color: #000000;
        text-align: center;
        line-height: 80px;
        letter-spacing: 5px;
        color: #ffffff;
        border-radius: 10px;
        font-size: 34px;
        margin-top: 30px;
      }
    }

    .ul {
      padding-left: 74px;

      .li {
        margin-top: 30px;
        font-size: 32px;
        color: #534efd;
      }
    }
  }
}
</style>
